<template>
  <view class="mt-30" style="margin-bottom: 120px">
    <view class="list-cell"
      ><view class="spot-title">已连接设备：</view>
      <view class="flex mt-30"
        ><view>{{ Object.keys(device).length > 0 ? device.name : '无' }}</view
        ><button v-if="Object.keys(device).length > 0" class="info-btn" @click="disConnect(device)">
          断开连接
        </button></view
      >
    </view>
    <view class="list-cell mt-30"
      ><view class="spot-title">已配对设备：</view>
      <uni-table stripe border class="mt-30">
        <uni-tr v-for="(item, index) in listData" :key="index">
          <uni-td align="center">{{ index + 1 }}</uni-td>
          <uni-td>{{ item.name }}</uni-td>
          <uni-td
            ><button class="info-btn" @click="connect(item)" :disabled="item.connected">
              {{ item.connected ? '已连接' : '连接' }}
            </button></uni-td
          >
        </uni-tr>
      </uni-table></view
    >

    <view class="submit-group">
      <button class="u-button" :ripple="true" @click="submit">返回测值</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'connectDevice',
  components: {},
  data() {
    return {
      listData: [],
      device: {}
    }
  },
  onLoad() {
    this.getDetail()
  },
  onPullDownRefresh() {
    this.getDetail()
  },
  onShow() {
    this.getDetail()
  },
  methods: {
    getDetail() {

    },
    connect(item) {

    },
    disConnect(device) {

    },
    submit() {
      if (Object.keys(this.device).length === 0) {
        return uni.showModal({
          content: '还未连接设备！',
          showCancel: false
        })
      }
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('callback:success', this.device)
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.border-radius {
  border-radius: 20rpx;
}

.spot-title {
  font-size: 30rpx;
}

.spot-orange {
  color: #c87c32;
}
</style>
